<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级联动</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            var $p = $('#p');
            var $c = $('#c');
            var $b = $('#b');
            var $x = $('#x');
            var $v = $('#v');
            //页面加载完,发送ajax请求获取省份数据
            $.post("/provinces",function (data) {
                //遍历省份数据
                data.forEach(function (value) {
                    $p.append('<option value="' + value.id + '">' + value.name + '</option>');
                });
            });
            // 给省份下拉框绑定值改变事件处理函数，当省份下拉框选项改变了，就发送请求获取这个省份
            // 对应城市数据，拿到数据再使用 DOM 显示城市下拉框中
            $p.change(function () {
                //获取被选中省份下拉框的 option 的 value 属性值，即省份 id 值
                var pid = $(this).val();
                //清除旧有元素
                $c.empty();
                $c.append('<option value="-1">请选择</option>');
                if (pid >= 1){
                    $.get('/cities','pid=' + pid,function (data) {
                        //遍历城市数据
                        data.forEach(function (value) {
                            $c.append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    });
                }
            });
            // 给城市下拉框绑定值改变事件处理函数，当城市下拉框选项改变了，就发送请求获取这个城市
            // 对应区数据，拿到数据再使用 DOM 显示区下拉框中
            $c.change(function () {
                //获取被选中城市下拉框的 option 的 value 属性值，即城市 id 值
                var pid = $(this).val();
                //清除旧有元素
                $b.empty();
                $b.append('<option value="-1">请选择</option>');
                if (pid >= 1){
                    $.get('/blocks','pid=' + pid,function (data) {
                        //遍历区数据
                        data.forEach(function (value) {
                            $b.append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    });
                }
            });
            // 给区下拉框绑定值改变事件处理函数，当区下拉框选项改变了，就发送请求获取这个区
            // 对应县数据，拿到数据再使用 DOM 显示县下拉框中
            $b.change(function () {
                //获取被选中区下拉框的 option 的 value 属性值，即区 id 值
                var pid = $(this).val();
                //清除旧有元素
                $x.empty();
                $x.append('<option value="-1">请选择</option>');
                if (pid >= 1){
                    $.get('/xians','pid=' + pid,function (data) {
                        //遍历县数据
                        data.forEach(function (value) {
                            $x.append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    });
                }
            });
            // 给县下拉框绑定值改变事件处理函数，当县下拉框选项改变了，就发送请求获取这个县
            // 对应村数据，拿到数据再使用 DOM 显示村下拉框中
            $x.change(function () {
                //获取被选中县下拉框的 option 的 value 属性值，即县 id 值
                var pid = $(this).val();
                //清除旧有元素
                $v.empty();
                $v.append('<option value="-1">请选择</option>');
                if (pid >= 1){
                    $.get('/villages','pid=' + pid,function (data) {
                        //遍历村数据
                        data.forEach(function (value) {
                            $v.append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    });
                }
            });
        });
    </script>
</head>
<body>
省份:<select id="p">
    <option value="-1">请选择</option>
</select>
城市:<select id="c">
    <option value="-1">请选择</option>
</select>
区:<select id="b">
    <option value="-1">请选择</option>
</select>
县:<select id="x">
    <option value="-1">请选择</option>
</select>
村:<select id="v">
    <option value="-1">请选择</option>
</select>
</body>
</html>